<template>
	<div class="mainViewBig" v-bind:style="style">
		<!--头部-->
		<div class="headerTop">
			<div class="TimeForm">
				<div class="state">
					<img src="@/assets/back_manage_img/steadyRyn.png"/>
					<div class="DateForm">
						<p>安全生产</p>
						<p><span>{{ timestap }}</span> 天 </p>
					</div>
				</div>
				<div>
					<p class="date">{{ nowDate }} {{ nowWeek }} </p>
					<p class="date">{{ nowTime }}</p>
				</div>
			</div>
			<h1 class="header-title">{{ sysInfo.sysName }}</h1>
			<div class="header-bg"></div>
			<div class="TimeForm2">
				<p class="date"><img :src="weatherImg"/>{{ weather }}</p>
			</div>
		</div>
		<div class="large-board main_new">
			<div class="content-item1">
				<dv-border-box-8>
					<div class="nav_box">
						<p class="all_title">订单</p>
						<div class="nav_box_contain">
							<div class="box_nav">
								<p class="box_inner"><span>{{orderDetail.totalCount}}</span></p>
								<p class="box_name">本年订单</p>
							</div>
							<div class="box_nav box_nav2">
								<p class="box_inner"><span>{{orderDetail.completeCount}}</span></p>
								<p class="box_name">已完成</p>
							</div>
							<div class="box_nav box_nav3">
								<p class="box_inner"><span>{{orderDetail.doingCount}}</span></p>
								<p class="box_name">交付中</p>
							</div>
							<div class="box_nav box_nav4">
								<p class="box_inner"><span>{{orderDetail.mothCount}}</span></p>
								<p class="box_name">本月订单</p>
							</div>
							<div class="box_nav box_nav5">
								<p class="box_inner"><span>{{orderDetail.dayCount}}</span></p>
								<p class="box_name">今日订单</p>
							</div>
							<div class="box_nav box_nav6">
								<p class="box_inner"><span>{{orderDetail.unSureCount}}</span></p>
								<p class="box_name">订单待确认</p>
							</div>
						</div>
					</div>
				</dv-border-box-8>
			</div>
			<div class="content-item2">
                <dv-border-box-8>
                    <div class="nav_box">
                        <p class="all_title">订单动态</p>
                        <div class="nav_box_contain">
					        <dv-scroll-board :config="configData" class="zll_board zll_board2 zll_board_bg" />
                        </div>
                    </div>
                </dv-border-box-8>
			</div>
		</div>
		<div class="large-board large-board2 main_new">
			<div class="content-item3">
				<dv-border-box-8>
					<div class="nav_box">
						<p class="all_title">原辅料用量及库存</p>
						<div class="nav_box_contain">
							<li class="yfl_nav head">
								<span></span>
								<span>本年</span>
								<span>本月</span>
								<span>今日</span>
								<span>当前库存</span>
							</li>
							<li class="yfl_nav bg">
								<span>主料</span>
								<span>{{fuliaoInfo.zlYearCount}}</span>
								<span>{{fuliaoInfo.zlMothCount}}</span>
								<span>{{fuliaoInfo.flTodayCount}}</span>
								<span class="num">{{fuliaoInfo.zlStorage}}</span>
							</li>
							<li class="yfl_nav">
								<span>辅料</span>
								<span>{{fuliaoInfo.flYearCount}}</span>
								<span>{{fuliaoInfo.flMothCount}}</span>
								<span>{{fuliaoInfo.flTodayCount}}</span>
								<span class="num">{{fuliaoInfo.flStorage}}</span>
							</li>
							<li class="yfl_nav bg">
								<span>色母</span>
								<span>{{fuliaoInfo.smYearCount}}</span>
								<span>{{fuliaoInfo.smMothCount}}</span>
								<span>{{fuliaoInfo.smTodayCount}}</span>
								<span class="num">{{fuliaoInfo.smStorage}}</span>
							</li>
						</div>
					</div>
				</dv-border-box-8>
			</div>
			<div class="content-item2">
                <dv-border-box-8>
                    <div class="nav_box">
                        <p class="all_title">当班在产任务</p>
					    <dv-scroll-board :config="configData2" class="zll_board zll_board2 zll_board_bg" />
                    </div>
                </dv-border-box-8>
			</div>
		</div>
		<div class="large-board large-board3 main_new">
			<div class="content-item1">
                <dv-border-box-8>
                    <div class="nav_box">
                        <p class="all_title">人事</p>
                        <div class="nav_box_contain">
							<div class="echart" ref="echartLine1"></div>
							<div class="echart" ref="echartLine2"></div>
							<div class="echart" ref="echartLine3"></div>
                        </div>
						<div class="_hr_line">
							<p><span>日期类型：</span>{{(renshiData.fdApproveTime ? renshiData.fdApproveTime : '-')
							 + '，' + (renshiData.fdCode  ? renshiData.fdCode : '-')
							 + '，' +( renshiData.fdTypeCn ? renshiData.fdTypeCn : '-')}}</p>
							<p><span>违章人：</span>{{(renshiData.violatorName ? renshiData.violatorName : '-')
							 + '，' + (renshiData.fdMoney ? renshiData.fdMoney : '-') + '元' }}</p>
							<p><span>开单人：</span>{{(renshiData.createrName ? renshiData.createrName : '-')
							 + '，' + (renshiData.dataonly ? renshiData.dataonly : '-')
							  + ' ' + (renshiData.timeonly ? renshiData.timeonly : '-')}}</p>
						</div>
                    </div>
                </dv-border-box-8>
			</div>
			<div class="content-item2">
				<dv-border-box-8>
					<div class="nav_box">
						<p class="all_title all_title2">产线运行及维保实时动态</p>
						<div class="nav_box_contain" style="height:80% ;">
							<div class="line_state">
								<p class="_num_part"><span class="num">{{gongXuVo.kaiji[0]}}</span>&nbsp;/&nbsp;<span>{{gongXuVo.totals[0]}}</span></p>
								<p>普直</p>
							</div>
							<div class="line_state">
								<p class="_num_part"><span class="num">{{gongXuVo.kaiji[1]}}</span>&nbsp;/&nbsp;<span>{{gongXuVo.totals[1]}}</span></p>
								<p>伸直</p>
							</div>
							<div class="line_state">
								<p class="_num_part"><span class="num">{{gongXuVo.kaiji[2]}}</span>&nbsp;/&nbsp;<span>{{gongXuVo.totals[2]}}</span></p>
								<p>U直</p>
							</div>
							<div class="line_state line_state1">
								<p class="_num_part"><span class="num">{{gongXuVo.kaiji[3]}}</span>&nbsp;/&nbsp;<span>{{gongXuVo.totals[3]}}</span></p>
								<p>成型</p>
							</div>
							<div class="line_state">
								<p class="_num_part"><span class="num">{{gongXuVo.kaiji[4]}}</span>&nbsp;/&nbsp;<span>{{gongXuVo.totals[4]}}</span></p>
								<p>单连包</p>
							</div>
							<div class="line_state">
								<p class="_num_part"><span class="num">{{gongXuVo.kaiji[5]}}</span>&nbsp;/&nbsp;<span>{{gongXuVo.totals[5]}}</span></p>
								<p>多包</p>
							</div>
							<div class="line_state">
								<p class="_num_part"><span class="num">{{gongXuVo.kaiji[6]}}</span>&nbsp;/&nbsp;<span>{{gongXuVo.totals[6]}}</span></p>
								<p>伸包</p>
							</div>
							<div class="line_state">
								<p class="_num_part"><span class="num">{{gongXuVo.kaiji[7]}}</span>&nbsp;/&nbsp;<span>{{gongXuVo.totals[7]}}</span></p>
								<p>U包</p>
							</div>
						</div>
						<div class="box">
                        <p>{{remake}}</p>
						</div>
					</div>
				</dv-border-box-8>
			</div>
			<div class="content-item3">
                <dv-border-box-8>
                    <div class="nav_box">
                        <p class="all_title">能耗<span>（Kw/h）</span></p>
                        <div class="nav_box_contain">
							<li class="nh_nav head">
								<span>区域</span>
								<span>本年</span>
								<span>本月</span>
								<span>今日</span>
							</li>
							<li class="nh_nav bg" v-for="(item,index) in powerMeters" :key="index">
								<span class="_hd">{{item.name}}</span>
								<span>{{item.year}}</span>
								<span>{{item.moth}}</span>
								<span>{{item.today}}</span>
							</li>
                        </div>
                    </div>
                </dv-border-box-8>
			</div>
		</div>
	</div>
</template>

<script>
import "./bigScreen.scss";
import resize from "../resize2";
import echartOption from './echart'

export default {
    name: "bigScreen",
    data() {
        return {
            style: {}, //缩放样式
            timestap: "0",
            nowTime: "",
            nowDate: "",
            nowWeek: "",
            weather: "晴  0-13 ℃",
            weatherImg: require("@/assets/back_manage_img/qingtian.png"),
            sysInfo: {sysName: "金利塑业 · 数字化运营中心"},
			order: {
				data1: 0,
				data2: 0,
				data3: 0,
				data4: 0,
				data5: 0,
				data6: 0,
			},
            configData: {
                carousel: 'page',
                waitTime: 5000,
                headerBGC: '#0d2235',
                oddRowBGC: '#0d2235',
                evenRowBGC: '#0d2235',
                headerHeight: '60',
                align: ['center','center','center','center','center','center','center','center','center'],
                rowNum: 4,
                header: ['订单号', '客户名称', '品类', '产品名称', '规格', '单件(万支)', '件数','总数量(万支)', '状态'],
                columnWidth: ['300', '400', '300', '400', '500', '350', '350', '300', '300', '150'],
                data: []
            },
            configData2: {
                carousel: 'page',
                waitTime: 5000,
                headerBGC: '#0d2235',
                oddRowBGC: '#0d2235',
                evenRowBGC: '#0d2235',
                headerHeight: '60',
                align: ['center','center','center','center','center','center','center','center',],
                rowNum: 4,
                header: ['品类', '计划号', '计划名称', '规格', '单件(万支)', '需求量（万支）','已完成(万支)', '机台'],
                columnWidth: ['300', '300', '400', '500', '300', '300', '300','300'],
                data: []
            },

			orderDetail: {
				totalCount: '',
				completeCount: '',
				doingCount: '',
				mothCount: '',
				dayCount: '',
				unSureCount: ''
			},
			fuliaoInfo: {
				zlTodayCount: '',
				zlMothCount: '',
				zlYearCount: '',
				flTodayCount: '',
				flMothCount: '',
				flYearCount: '',
				smTodayCount: '',
				smMothCount: '',
				smYearCount: '',

				zlStorage: '',
				flStorage: '',
				smStorage: '',
			},

			gongXuVo: {totals: [0,0,0,0,0,0,0,0], kaiji: [0,0,0,0,0,0,0,0], percent: [0,0,0,0,0,0,0,0]},
			renshiData: {},

			powerMeters:[],
			remake:'',// 产线数据
		};
    },
    methods: {

		getFirstPageYearMeterPowers() {
			let self = this;
			self.$http({
				url: "/jinl/meterPower/getFirstPageYearMeterPowers",
				method: "post",
				params:{notToken:true}
			}).then(resp => {
				self.powerMeters = [];
				if (resp.success) {
					console.log(resp.result);
					let meters = resp.result.meter||[];
					let years = resp.result.year||[];
					let moths = resp.result.moth||[];
					let todays = resp.result.today||[];
					for(let i =0 ;i < meters.length;i++){
						let meter = meters[i];
						let year = years[i];
						let moth = moths[i];
						let today = todays[i];
						let obj = {name:meter,year:year,moth:moth,today:today};
						self.powerMeters.push(obj);
					}
				}
			});
		},

        pageShow() {//页面初始宽高显示 和 页面大小改变监听
            this.style = resize.setScale();
			window.addEventListener('resize', () => { 
                this.style = resize.setScale();
			})
        },
        getdateFormat() {//显示时间
            var _this = this;
            let wk = new Date().getDay();
            let yy = String(new Date().getFullYear());
            let mm = new Date().getMonth() + 1;
            let dd = String(new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate());
            let hou = String(new Date().getHours() < 10 ? "0" + new Date().getHours() : new Date().getHours());
            let min = String(new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes());
            let sec = String(new Date().getSeconds() < 10 ? "0" + new Date().getSeconds() : new Date().getSeconds());
            let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六",];
            let week = weeks[wk];
            _this.nowTime = hou + ":" + min + ":" + sec;
            _this.nowDate = yy + "." + mm + "." + dd;
            _this.nowWeek = week;
        },
        getEchartData() {
            let self = this;
            let echart1 = self.$echarts.init(self.$refs.echartLine1);
            let option1 = echartOption.option1;
            option1.title.text = '20'
            echart1.setOption(option1);

            let echart2 = self.$echarts.init(self.$refs.echartLine2);
            let option2 = echartOption.option2;
            echart2.setOption(option2);

            let echart3 = self.$echarts.init(self.$refs.echartLine3);
            let option3 = echartOption.option3;
            echart3.setOption(option3);

            window.onresize = function() {
                echart1.resize()
                echart2.resize()
                echart3.resize()
            }
        },

        async getWeather() {
            let self = this;
            self.$http({
                url: "/jinl/firstPage/getForecast",
                method: "post",
                params:{cityCode:'101220701'}
            }).then(resp => {
                let result = resp.result;
                let weather = result ? result.data.forecast[0] : {};
                let high = weather.high;
                let low = weather.low;
                let type = weather.type;
                high = high.replace(/[^0-9]/gi, "");
                low = low.replace(/[^0-9]/gi, "");
                self.weather = type + low + ' - ' + high
                if (type.indexOf('雨') > -1) {
                    self.weatherImg = require('@/assets/back_manage_img/xaiyu.png');
                }
                if (type.indexOf('晴') > -1) {
                    self.weatherImg = require('@/assets/back_manage_img/qingtian.png');
                }
                if (type.indexOf('云') > -1|| type.indexOf('阴') > -1) {
                    self.weatherImg = require('@/assets/back_manage_img/tianqi.png');
                }
            });
        },

		getFirstPageOrderInfo() {
			let self = this;
			self.$http({
				url: "/jinl/firstPage/getFirstPageOrderInfo",
				method: "post",
			}).then(resp => {
				if (resp.success) {
					self.orderDetail = resp.result
				}
			});
		},

		getFirstPageFuLiaoInfo() {
			let self = this;
			self.$http({
				url: "/jinl/firstPage/getFirstPageFuLiaoInfo",
				method: "post",
			}).then(resp => {
				if (resp.success) {
					self.fuliaoInfo = resp.result
				}
			});
		},

		getFirstPageOrderInfoList() {
			let self = this;
			self.$http({
				url: "/jinl/firstPage/getFirstPageOrderInfoList",
				method: "post",
				params:{notToken:true}
			}).then(resp => {
				self.configData.data = [];
				if (resp.success) {
					let allDatas = [];
					for(let data of resp.result){
						let tables = [];
						tables[0] = data.orderNum;
						tables[1] = data.customer;
						tables[2] = data.itemTypeId;
						tables[3] = data.productName;
						tables[4] = data.gradeValue;
						tables[5] = data.thNumber;
						tables[6] = data.peieceNum;
						//总数量
						tables[7] = (parseFloat(data.thNumber) * parseFloat(data.peieceNum)).toFixed(1);
						let orderStatus = data.orderStatus;
						let span = '';
						if(orderStatus == '1'){
							span = '待确认'
						}else {
							span = '进行中'
						}
						tables[8] = span

						allDatas.push(tables);
					}
					self.configData.data = allDatas;
					self.configData = Object.assign({},self.configData);
				}
			});
		},

		getFirstOnDutyProducts() {
			let self = this;
			self.$http({
				url: "/jinl/firstPage/getFirstOnDutyProducts",
				method: "post",
				params:{notToken:true}
			}).then(resp => {
				self.configData2.data = [];
				if (resp.success) {
					let allDatas = [];
					for(let data of resp.result){
						let tables = [];
						tables[0] = data.itemTypeId;
						tables[1] = data.planCode;
						tables[2] = data.planName;
						tables[3] = data.gradeValue;
						tables[4] = data.thNumber;
						let span = '<span style="color: #38f5ff">'+data.totalNum+'</span>';
						tables[5] = span;
						tables[6] = data.completeNum;
						tables[7] = data.jiTai;
						allDatas.push(tables);
					}
					let distSize = 5 - allDatas.length;
					if(distSize > 0){
						for(let i =0 ;i < distSize ;i++){
							allDatas.push({});
						}
					}
					self.configData2.data = allDatas;
					self.configData2 = Object.assign({},self.configData2);
				}
			});
		},

		//工序
		getDyDeviceGongXu() {
			let self = this;
			self.$http({
				url: "/jinl/firstPage/getDyDeviceGongXu",
				method: "post",
				params: {notToken: true}
			}).then(resp => {
				self.gongXuVo.totals = [0, 0, 0, 0, 0, 0, 0, 0];
				self.gongXuVo.kaiji = [0, 0, 0, 0, 0, 0, 0, 0];
				self.gongXuVo.percent = ['0.00%', '0.00%', '0.00%', '0.00%', '0.00%', '0.00%', '0.00%', '0.00%'];
				if (resp.success) {
					let gongXuVos = resp.result || [];
					console.log('=======gongXuVos========')
					console.log(gongXuVos)
					for (let data of gongXuVos) {
						let processName = data.processName;
						let itemName = data.itemName;
						let running = parseFloat(data.running);
						let total = parseFloat(data.total);

						let index = -1;
						if (processName == '挤塑直切') {
							index = 0;
							if (itemName == '伸直') {
								index = 1;
							} else if (itemName == 'U直') {
								index = 2;
							}
						} else if (processName == '成型') {
							index = 3;
						} else if (processName == '包装') {
							index = 4;
							if (itemName == '多支') {
								index = 5;
							} else if (itemName == '伸缩') {
								index = 6;
							} else if (itemName == 'U型') {
								index = 7;
							}
						}
						if(index == 0){
							running = total;
						}
						if(index > -1){
							self.gongXuVo.totals[index] = total;
							self.gongXuVo.kaiji[index] = running;
						}
					}
				}
			});
		},

		getRepairReportList(){
			let self = this;
			var param={
				"startIndex": 0,
   				"totalPage": 10,
   				"status": ""
			}
			self.$http({
				url: "/jinl/repairReport/getRepairReportListDp",
				method: "post",
				data: JSON.stringify(param),
				dataType: 'json',
				contentType: "application/json",
			}).then(resp => {
				if (resp.success) {
					if(resp.result.length>0){
						self.remake=resp.result[0].remake
					}		
				}

			})
		},

		//人事板块
		getRenShi() {
			let self = this;
			self.$http({
				url: "/jinl/firstPage/renshi",
				method: "post",
			}).then(resp => {
				if (resp.success) {
					let zaizhi = resp.result['zaizhi'];
					let currentYearNumber = resp.result['currentYearNumber'];
					let currentMonthNumber = resp.result['currentMonthNumber'];
					let list = resp.result.list;

					let echart1 = self.$echarts.init(self.$refs.echartLine1);
					let echart2 = self.$echarts.init(self.$refs.echartLine2);
					let echart3 = self.$echarts.init(self.$refs.echartLine3);

					let option1 = echartOption.option1;
					let option2 = echartOption.option2;
					let option3 = echartOption.option3;

					option1.title.text = zaizhi;
					option2.title.text = currentYearNumber;
					option3.title.text = currentMonthNumber;

					echart1.setOption(option1);
					echart2.setOption(option2);
					echart3.setOption(option3);

					self.changeList(list)
				}
			});
		},

        changeList(list) {
            let self = this;
            let page = 0;
            if(self.interval1){
                clearInterval(self.interval1);
            }
			if(list.length == 0) {
				self.renshiData = {
					fdApproveTime: '-',
					fdCode: '-',
					fdTypeCn: '-',
					violatorName: '-',
					fdMoney: '-',
					createrName: '-',
					dataonly: '-',
					timeonly: '-',
				}
			}else {
				self.renshiData = list[page]
			}
            self.interval1 = setInterval(function(){
                page++;
				if(page == list.length){
                    page = 0
                }
				if(list.length == 0) {
					self.renshiData = {
						fdApproveTime: '-',
						fdCode: '-',
						fdTypeCn: '-',
						violatorName: '-',
						fdMoney: '-',
						createrName: '-',
						dataonly: '-',
						timeonly: '-',
					}
				}else {
					self.renshiData = list[page]
				}
            },1000*5)
        },

    },
    mounted() {
        let self = this;
        setInterval(() => {
            self.getdateFormat();
        }, 1000);
        self.getWeather();
        setInterval(() => {
            self.getWeather();
        }, 1000 * 3600);

        self.getRenShi();
        setInterval(() => {
        	self.getRenShi();
		}, 24 * 3600);

		self.getFirstPageOrderInfo();
		setInterval(() => {
			self.getFirstPageOrderInfo();
		}, 1000 * 30);

		self.getFirstPageFuLiaoInfo();
		setInterval(() => {
			self.getFirstPageFuLiaoInfo();
		}, 1000 * 60);

		self.getFirstPageOrderInfoList();
		setInterval(() => {
			self.getFirstPageOrderInfoList();
		}, 1000 * 80);

		self.getFirstOnDutyProducts();
		setInterval(() => {
			self.getFirstOnDutyProducts();
		}, 1000 * 60);

		self.getDyDeviceGongXu();
		self.getRepairReportList();// 获取报修数据
		setInterval(() => {
			self.getDyDeviceGongXu();
			self.getRepairReportList();// 获取报修数据

		}, 1000 * 45);


		self.getFirstPageYearMeterPowers();
		setInterval(() => {
			self.getFirstPageYearMeterPowers();
		}, 1000 * 52);

        self.pageShow()
		self.getEchartData()
		function calculateDaysBetweenDates(startDate, endDate) {
			const start = new Date(startDate);
			const end = new Date(endDate);
			const millisecondsPerDay = 1000 * 60 * 60 * 24;
			const days = Math.floor((end - start) / millisecondsPerDay);
			return days;
		}
		const daysSinceMayFirst = calculateDaysBetweenDates('2024-05-01', new Date().toISOString());
		this.timestap = daysSinceMayFirst.toString();
    },
};
</script>

<style scoped lang="scss">
	.box{

		height: 20%;
		p{
			color: #ee5d52;
			text-align: center;
			letter-spacing: 4px;
			
		}
	}
</style>
